<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="format-detection" content="telephone=no" />
	<title>友好生鲜</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/base.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/address.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/zepto.js"></script>
</head>
<body>
<!--首页头部-->
<div class="header_body">
	<div class="header_main">
		<div class="header_icon01"><a href="index_my.html"></a></div>
		<div class="header_txt">添加地址</div>
		<div class="header_icon02"><a href="#1"></a></div>
	</div>
</div>
<!--内容-->
<div class="callslip_05_main">
	<div class="callslip_05_list bian">
		<p>收货人：</p>
		<div><input type="text" name="name" id="name" placeholder="请填写收货人姓名"></div>
	</div>
	<div class="callslip_05_list bian">
		<p>手机号码：</p>
		<div><input type="text" name="name" id="name" placeholder="请填写收货人手机号码"></div>
	</div>
	<div class="callslip_05_list bian">
		<p>收货地址：</p>
		<div>
			<div class="row main" style="height:0.98rem">
					<div class="col-md-12" style="height:0.98rem">
							<div class="row" style="text-align:left; height:0.98rem">
								 <a href="#" class="btn btn-info btn-lg active chengshi" role="button" id="sel_city">请选择收货地址</a>
							</div>
					</div>
			</div>
		</div>
	</div>
	<div class="callslip_05_list2">
		<p>详细地址：</p>
		<div><textarea name="tt" maxlength="200" placeholder="详细地址"></textarea></div>
	</div>
</div>

<div class="button"><a href="#1">保存</a></div>
<script src="${pageContext.request.contextPath}/js/picker.min.js"></script>
<script src="${pageContext.request.contextPath}/js/city.js"></script>
<script>
	var nameEl = document.getElementById('sel_city');
	
	var first = []; /* 省，直辖市 */
	var second = []; /* 市 */
	var third = []; /* 镇 */
	
	var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
	
	var checked = [0, 0, 0]; /* 已选选项 */
	
	function creatList(obj, list){
		obj.forEach(function(item, index, arr){
		var temp = new Object();
		temp.text = item.name;
		temp.value = index;
		list.push(temp);
		})
	}
	
	creatList(city, first);
	
	if (city[selectedIndex[0]].hasOwnProperty('sub')) {
		creatList(city[selectedIndex[0]].sub, second);
	} else {
		second = [{text: '', value: 0}];
	}
	
	if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
		creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
	} else {
		third = [{text: '', value: 0}];
	}
	
	var picker = new Picker({
			data: [first, second, third],
		selectedIndex: selectedIndex,
			title: '地址选择'
	});
	
	picker.on('picker.select', function (selectedVal, selectedIndex) {
		var text1 = first[selectedIndex[0]].text;
		var text2 = second[selectedIndex[1]].text;
		var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
	
			nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
	});
	
	picker.on('picker.change', function (index, selectedIndex) {
		if (index === 0){
			firstChange();
		} else if (index === 1) {
			secondChange();
		}
	
		function firstChange() {
			second = [];
			third = [];
			checked[0] = selectedIndex;
			var firstCity = city[selectedIndex];
			if (firstCity.hasOwnProperty('sub')) {
				creatList(firstCity.sub, second);
	
				var secondCity = city[selectedIndex].sub[0]
				if (secondCity.hasOwnProperty('sub')) {
					creatList(secondCity.sub, third);
				} else {
					third = [{text: '', value: 0}];
					checked[2] = 0;
				}
			} else {
				second = [{text: '', value: 0}];
				third = [{text: '', value: 0}];
				checked[1] = 0;
				checked[2] = 0;
			}
	
			picker.refillColumn(1, second);
			picker.refillColumn(2, third);
			picker.scrollColumn(1, 0)
			picker.scrollColumn(2, 0)
		}
	
		function secondChange() {
			third = [];
			checked[1] = selectedIndex;
			var first_index = checked[0];
			if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
				var secondCity = city[first_index].sub[selectedIndex];
				creatList(secondCity.sub, third);
				picker.refillColumn(2, third);
				picker.scrollColumn(2, 0)
			} else {
				third = [{text: '', value: 0}];
				checked[2] = 0;
				picker.refillColumn(2, third);
				picker.scrollColumn(2, 0)
			}
		}
	
	});
	
	picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
		console.log(selectedVal);
		console.log(selectedIndex);
	});
	
	nameEl.addEventListener('click', function () {
			picker.show();
	});
</script>
</body>
</html>
